import { defineComponent, ref, reactive, withDefaults, defineProps,toRefs } from 'vue'
export interface TreeSelectorProps {
  msg?: string,
  num?: number,
}
export default defineComponent({
  name: 'MyCount',
  // props: { msg: String, num: Number },
  // props: withDefaults(defineProps<TreeSelectorProps>(),{msg:"msmsgmsgmsgg"}),
  // props: defineProps<TreeSelectorProps>(),
  props: {
    msg: {
      type: String,
      default: '默认消息'
    },
    num: {
      type: Number,
      default: -100
    }
  },
  setup(props, { emit }) {
    // 方式一
    // const newNum = ref(props.num);
    // 方式二
    const newProps = reactive({ ...props });
     const { msg, num } = toRefs(props)
    console.log(props.num,num,"props.num")
    console.log(props.msg,msg,"props.msg")
    const handleChange = (value: number) => {
      console.log(value);
    };

    const onclick = () => {
      // emit 子组件向父组件传值
      emit('mycount', newProps);
    };
    return () => (
      <div>
        <h1>
          {props.msg}
          {newProps.num}
        </h1>
        <el-input-number v-model={newProps.num} min="1" max="10" onChange={handleChange} />
        <el-button onClick={onclick}>点击向父组件传值</el-button>
      </div>
    );
  },
});
